Ultimate Web Development Tips and Resources
This article is about all the tips and resources you would require to start your web development journey.
Give me six hours to chop down a tree and I will spend the first four sharpening the axe. — Abraham Lincoln
Personally, before starting web development, I did a lot of research about how to get started, what are the various web programming languages, and which are the latest technologies in this domain. After gaining some ground knowledge, I started with the actual web development work. However during my initial days, I started with front-end development and just developing static web pages with some cool styling. But, when I started to dig deep into web development, I realized that there were many additional things that I needed to research on.
Web has a lot to give and mastering each and every concept of web would take some time. Over all my years into exploring web, I have noted various points on topics related to web, which I have shared in this article. Implementing all these points and tips alone will help you become a great web developer. At the end of this article, I have aggregated some names of the resources that I have been using, and that you can use at various phases of your development.
I have mentioned topics in a sequential order, which I followed, and suggest you to do the same.
1. Front-end development
Start with basics of HTML and CSS. Both are really simple and you can learn these technologies at w3schools. Try to make simple static webpages using HTML and CSS. Understand the box model, transitions, transformations and media queries in CSS.
Once you are comfortable with CSS, start with Bootstrap. It is a front-end framework with main focus on responsive, i.e. mobile-friendly web development. This will make your development faster and improve your effeciency for both desktop and mobile based web development.
Now, start with Javascript. Understand the DOM and DOM manipulation using Javascript. You may also explore the popular jQuery framework of Javascript.
Now, try to make simple projects like a ToDo App, any simple browser game using Javascript or a website with some cool transitions and animations.
2. Back-end development
There are many technologies that you can use for back-end web development. I would suggest start with PHP and MySQL. PHP is scripting language and MySQL is a database management system which use SQL for querying. These technologies are very simple and will help you in understanding the request/ response techniques in web browser and how to interact with database and back-end. You can also explore PHP frameworks like Laravel or CodeIgniter.
You can also start with Node.js, Express.js and MongoDB, which are more popular nowadays. One of the advantage over PHP is that Node.js uses Javascript for back-end as well, so you don’t need to learn a new programming language as you had used Javascript for front-end development. MongoDB is a NoSQL database, which stores data in documents and collections rather than tables(which MySQL uses). So exploring both databases will help you understand structure of both types of databases.
Make projects that has very basic database requirements like signup and login functionality, and try to perform CRUD(create, read, update, delete) operations on some data using these technologies.
3. HTTP Request/Response, Cookies, Sessions and AJAX
Once you are comfortable with basic front-end and back-end technologies, it’s time for you to jump to some advanced concepts in web.
Explore about server sessions, HTTP Request and Response, HTTP sessions and cookies. It will help you understand about browsers, servers and how messages are sent from client to server and how server processes those requests and sends response.
Implement Ajax on your previously developed web application(that you developed with back-end). Ajax is most important concept in web development. It will also broaden your knowledge on request/response paradigm.
4. REST APIs and more..
As you get clear idea about HTTP request/response model, you can now try to build an API in a RESTful manner. RESTful APIs are used extensively in cloud applications because of its statelessness, and understanding these technologies can help you get more exposure to various advanced topics and also help you during job interviews.
Try to implement an simple E-commerce API which uses HTTP methods to perform CRUD(create, read, update, delete) operations on products.
5. Popular frameworks
Apart from trying out Laravel or Node.js, you can also try popular frameworks like Angular, React, Flutter for Web for front-end development. Learning some framework is not completely necessary, but it is advantageous as it enhances readability and abstraction of modules based on various architectural pattern and models (client-server, MVC, etc), and will make your coding life easier.
Just understanding some technologies and languages is not important. You need to implement everything that you understand so that you get a practical view of how stuff works. At the end of each section, I have provided some ideas on mini-projects that you can implement for solidifying your concepts. You can make up and work on your own application idea, start with small and gradually build up all the way up a full stack web application. I hope you get some insights on various topics related to web development. This whole journey from start to end will take some time, but eventually it will be worth it.
What to do after all these things?
KEEP LEARNING!
Try some latest technologies
Don’t just stick to web development, try out mobile application development, machine learning, computer vision, etc. It will widen your vision across various domains.
Do internships/ research.
Expand your network.
And finally, share your knowledge with others. :)
Now, as promised, following are some resource names that you will be requiring at various phases of web development. These resources will help you in making your website look more professional. Make sure you save this or write it somewhere down, so you don’t have to search at ten different areas and waste your time.
- IDE for web development — Sublime, Brackets
- UI Design Tools — Invision, Adobe XD
- Icons — FontAwesome, Glyphicons.
- Fonts — Google Fonts
- Colors — UIGradients, HTMLColorCodes, FlatUIColors
- Stock Photos — Unsplash, Pexels
- Illustrations — Undraw, Drawkit
- Version Control — Github
Thank you for reading this article.
I have pushed some cool projects on my Github account.
Feel free to contact me if you need any help or discuss something.
